<template>
  <div class="sdy-home-banner">
    <van-swipe
      class="swiper-container"
      :autoplay="3000"
      :duration="1000"
      indicator-color="red">
      <van-swipe-item
        v-for="item in bannerList"
        :key="item.bannerid"
        >
        <van-image :src="item.img"></van-image>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>
<script setup lang="ts">
import { bannerListApi } from '@/api/banner'
import type { MyBannerItem} from '@/config/interface'
import { ref,onMounted} from 'vue'
// 轮播图要替换，用ref不用reactive
const bannerList = ref<MyBannerItem[]>([])
onMounted(async () => {
  const res = await bannerListApi()
  bannerList.value = res.data
  console.log(res.data)
})
</script>
<style scoped lang="scss">
@import '@/styles/variable.scss';
.sdy-home-banner{
  height: 180px;
  position: relative;
  box-sizing: border-box;
  padding: 15px;

  &::after {
    content: '';
    position: absolute;
    left: 0;
    top: -50px;
    width: 100%;
    height: 100%;
    background-color: $globalColor;
    border-radius:  0 0 200px 200px / 0 0 40px 40px;
    z-index: -1;
  }
  > .swiper-container {
    width: 100%;
    height: 100%;
    background-color: orange;
    border-radius: 10px;
    overflow: hidden;
  }
}
</style>